<template>
  <div id="translate-form">
    <el-form :inline="true">
      <el-form-item label="原文">
        <el-input v-model="textToTranslate" type="text" placeholder="输入需要翻译的内容"/>
      </el-form-item>
      <el-form-item label="目标语言">
        <el-select v-model="language" placeholder="请选择语言" value="en">
          <el-option label="英语" value="en"/>
          <el-option label="俄语" value="ru"/>
          <el-option label="韩语" value="ko"/>
          <el-option label="日语" value="ja"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="formSubmit">翻译</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "translate-form",
    data: function () {
      return {
        textToTranslate: "",
        language: ""
      }
    },
    methods: {
      formSubmit: function (e) {
        this.$emit("formSubmit", this.textToTranslate, this.language);
        e.preventDefault();
      }
    },
    created: function () {
      this.language = "en";
    }
  }
</script>

<style scoped>

</style>
